<template>
  <div class="home">
      <div class="home-main">
        <div class="home-main-center">
            <div class="title">累计用户数（人）</div>
            <div class="num">{{staticData.totalUser||0}}</div>
            <div class="home-main-center-infor">
                <div class="home-main-center-infor-item">
                  今日新增：{{staticData.todayUser||0}}
                </div>
                <div class="home-main-center-infor-item">
                  本月新增：{{staticData.currMonthUser||0}}
                </div>
                <div class="home-main-center-infor-item">
                  昨日新增：{{staticData.preDayUser||0}}
                </div>
                <div class="home-main-center-infor-item">
                   上月新增：{{staticData.preMonthUser||0}}
                </div>
            </div>
        </div>
        <div class="home-main-center">
           <div class="title">累计订单数（单）</div>
           <div class="num">{{staticData.totalOrder||0}}</div>
           <div class="home-main-center-infor">
                 <div class="home-main-center-infor-item">
                  今日订单：{{staticData.todayOrder||0}}
                </div>
                <div class="home-main-center-infor-item">
                  本月订单：{{staticData.currMonthOrder||0}}
                </div>
                <div class="home-main-center-infor-item">
                  昨日订单：{{staticData.preDayOrder||0}}
                </div>
                <div class="home-main-center-infor-item">
                   上月订单：{{staticData.preMonthOrder||0}}
                </div>
            </div>
        </div>
        <div class="home-main-center">
           <div class="title">累计交易额（元）</div>
           <div class="num">￥{{staticData.totalSalesAmount||0}}</div>
           <div class="home-main-center-infor">
                 <div class="home-main-center-infor-item">
                  今日：￥{{staticData.todaySalesAmount||0}}
                </div>
                <div class="home-main-center-infor-item">
                  本月：￥{{staticData.currMonthSalesAmount||0}}
                </div>
                <div class="home-main-center-infor-item">
                  昨日：￥{{staticData.preDaySalesAmount||0}}
                </div>
                <div class="home-main-center-infor-item">
                   上月：￥{{staticData.preMonthSalesAmount||0}}
                </div>
            </div>
        </div>

      </div>
      <div class="echartsCenter"  style="width: 100%">
            <p class="echartsLeftBtn" v-if="isRight"  @click="rightEcharts()"><img src="http://fs-cdn.jouma.cn/topup/report/img/left.png"></p>
            <p class="echartsRightBtn" v-if="page>1" @click="leftEcharts()"><img src="http://fs-cdn.jouma.cn/topup/report/img/right.png"></p>
            <div id="main" style="width: 100%;height: 440px;"></div>
        </div>
        <div class="home-table">
          <div class="title">数据报表 <p><span @click="searchData(1)" :class="search.type==1?'on':''">日报</span>/<span  @click="searchData(2)"  :class="search.type==2?'on':''">月报</span></p></div>
          <Table

        :columns="diyData.columns"
        :data="tableData"
      >
        <template slot="footer">
             <Page
            :total="total"
            show-total
            :page-size="search.pageSize"
            :current="search.pageNo"
            @on-change="pageChange"
            @on-page-size-change="pageSizeChange"
            class-name="footer-page"
            show-elevator
            show-sizer
          ></Page>
        </template>
      </Table>
        </div>

  </div>
</template>

<script>
import {
  staticData,kpiBus,staticList
} from '@/api/index.js'
export default {
  name: 'home',
  data () {
    return {
      staticData:{
        currMonthOrder:0,
        currMonthSalesAmount:0,
        currMonthUser:0,
        preDayOrder:0,
        preDaySalesAmount:0,
        preDayUser:0,
        preMonthOrder:0,
        preMonthSalesAmount:0,
        preMonthUser:0,
        todayOrder:0,
        todaySalesAmount:0,
        todayUser:0,
        totalOrder:0,
        totalSalesAmount:0,
        totalUser:0,
      },
      diyData:{
        columns: [
          {
            title: '日期',
             key: 'date',
          },
          {
            title: '用户新增',
             key: 'userNumbers',
          },
          {
            title: '订单数',
             key: 'orderNumbers',
          },
          {
            title: '交易额',
             key: 'salesAmount',
          },
          {
            title: '优惠额',
             key: 'discountAmount',
          },
          {
            title: '售后订单',
             key: 'questionOrderNum',
          },
          {
            title: '退款金额',
             key: 'refundAmount',
          },
          {
            title: '推广佣金',
             key: 'commission',
          },
        ]
      },
      isRight:false,
      page:1,
      tableData:[],
      total:0,
      search: {
        type:1,
        pageNo: 1,
        pageSize: 10,
      },
    }
  },
  methods: {
      getstaticList(){
          var that=this
          var param={
              timestamp:new Date().getTime(),
              pageNo:this.search.pageNo,
              pageSize:30,
          }
          staticList(param).then(res=>{
            that.loading=false
            if(res.code==200){
                var xAxisTime=[]//时间
                var duration=[] //订单数
                var distance=[] //营业额
                var durationAll=0//订单数总数
                var distanceAll=0//营业额总数
                res.data.forEach(element => {
                  xAxisTime.push(element.date)
                  duration.push(element.orderNumbers)                
                  distance.push(element.salesAmount)
                  durationAll+=Number(element.orderNumbers)
                  distanceAll+=Number(element.salesAmount)
                });
                
                if(res.data.length>0){
                  that.getmyChart(xAxisTime.reverse(),duration.reverse(),distance.reverse(),durationAll,distanceAll)
                  if(res.data.length>=30){
                    that.isRight=true
                  }else{
                    that.isRight=false
                  }
                }else{
                  this.search.page=this.search.page-1
                }
                
                
            } 
          })

      },
      getmyChart(xAxisTime,duration,distance,durationAll,distanceAll){
        var that=this
        // var distanceTxt='营业额 / 总计：'+distanceAll.toFixed(2)+'元'
        // var durationTxt='单数 / 总计：'+durationAll+'单'
        // var legendData=[{name:distanceTxt,icon: 'roundRect'},{name:durationTxt,icon: 'circle'}]
        var myChart = this.$echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
          title: {
            text: '交易统计'
          },
          tooltip: {
            trigger: 'axis',
            // formatter: function(params) {
            //     let str = params[0].axisValue+'<br>';
            //     params.forEach((item, idx) => {
            //         var title=that.getStr(item.seriesName,'/') 
            //         var unit=''
            //         if(title=='营业额 '){
            //             unit="元"
            //         }else if(title=='单数 '){
            //             unit="单"                            
            //         }
            //         str+=item.marker+''+title+'：'+item.data+unit+'<br>'
            //         // str+=`${item.marker}${title}: ${item.data}`+'<br>'
            //     })
            //     return str
            // },
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#999'
              }
            }
          },
          grid: {
            left: "0%",
            right: "0%",
            width: "100%"
          },
          legend: {
            data: ['交易额','订单数'],
            right:"0%",     
          },
          xAxis: {
            type: "category",
            data: xAxisTime
          },
          yAxis: [
            {
              type: 'value',
            }
          ],
          series: [       
            {
              name: '交易额',
              type: 'line',
              data: distance,
              symbolSize:8,
              lineStyle: {
                color: '#1890FF',
                width: 1.5,
              },
              itemStyle: {
                color: '#1890FF',
              }
              
            },
            {
              name: '订单数',
              type: 'line',
              data: duration,
              symbolSize:8,
              lineStyle: {
                color: '#2FC25B',
                width: 1.5,
              },
              itemStyle: {
                color: '#2FC25B',
              }
              
            },
          ]
        };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        console.log(myChart)
      },
      leftEcharts(){
        if(this.page>1){
         this.page=this.page-1
         this.loading=true
         this.getstaticList()
        }
      },
      rightEcharts(){
        if(this.isRight){
          this.page=this.page+1
          this.loading=true
          this.getstaticList()
        }
      },      
    getStaticData(){
      staticData().then(res=>{
        console.log(res)
        const {data} = res
        this.staticData=data
      })
    },
      // 分页
    pageChange (e) {
      this.search.pageNo = e
       this.getkpiBus()
    },
    pageSizeChange (e) {
      this.search.pageSize = e
      this.search.pageNo = 1
      this.getkpiBus()
    },
    searchData(i){
       this.search.type=i
    this.search.pageNo = 1
      this.getkpiBus()
    },
    //日报月报
      getkpiBus(){
        var that=this
        var param={
            token:localStorage.getItem('token'), 
            ...that.search
        }
        kpiBus(param).then(res=>{
           that.tableData=res.data.list
              that.total=res.data.totalCount      
        })
      }

  },
   mounted () {
    this.getStaticData()
    this.getstaticList()
    this.getkpiBus()
  },
}
</script>

<style scoped lang="less">
.home{
  width: 100%;
  .home-main{
    width: 100%;
    display: flex;
    align-items: center;
    .home-main-center{
      width: 260px;
      height: 120px;
      opacity: 1;
      background: rgba(255, 255, 255, 1);
      border: 1px solid rgba(67, 207, 124, 1);
      padding: 10px 20px;
      box-sizing: border-box;
      margin-right:20px;
      .title{
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0px;
        line-height: 20.27px;
        color: rgba(128, 128, 128, 1);
        text-align: left;
        margin-bottom: 5px;
      }
      .num{
        font-size: 20px;
        font-weight: 700;
        letter-spacing: 0px;
        line-height: 28.96px;
        color: rgba(0, 0, 0, 1);
        text-align: left;
        margin-bottom: 5px;
      }
      .home-main-center-infor{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap:wrap;
        .home-main-center-infor-item{
          width: 50%;
          font-size: 12px;
          font-weight: 400;
          letter-spacing: 0px;
          line-height: 17.38px;
          color: rgba(56, 56, 56, 1);
          text-align: left;
          margin-bottom:5px;
        }
        .home-main-center-infor-item:nth-child(2n){
          text-align: right;
        }
      }
    }
  }
  .echartsCenter{
    width: 100%;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin: 20px 0;
  }
  .home-table{
    width: 100%;
    background: #fff;
    padding: 10px;
    box-sizing: border-box;
    margin: 20px 0;
    .title{
       width: 100%;
 font-size: 14px;
font-weight: 700;
letter-spacing: 0px;
line-height: 20.27px;
color: rgba(56, 56, 56, 1);
    margin-bottom: 10px;
    display: flex;
    align-content: center;
    align-items: center;

    p{
      margin-left: 40px;
      font-size: 14px;
      font-weight: 400;
      letter-spacing: 0px;
      line-height: 20.27px;
      color: rgba(56, 56, 56, 1);
      span{
        cursor: pointer;
        margin: 0px 5px;
      }
      span.on{
        color:000;
        font-size: 16px;
        font-weight: 700;
      }
    }
    }
  }
}
</style>
